<script lang="ts" setup>
import {ref} from 'vue'
import {useUserStore} from '@fssc/admin'
import {useRouter} from "vue-router";
import {homePage, readRecord} from '../../api/message-announcement/announcement'
import ListItem from './components/listItem.vue'
import DetailDrawer from '../message-notification/announcement/components/detailDrawer.vue'

const router = useRouter()
const userStore = useUserStore()

const showMore = () => {
  router.push({name: 'MsgNotifyAnnouncement'})
}

const drawerRef = ref()
const onShowDetail = async (row: any) => {
  if (!row.readStatus) {
    await readRecord({id: row.id})
  }
  drawerRef.value.onShow(row.id)
  list.value.find(item => item.id === row.id).readStatus = true
}

const query = ref({
  pageNum: 1,
  pageSize: 20,
})
const loading = ref(false)
const list = ref([])
const total = ref(0)
const getList = async () => {
  loading.value = true
  homePage(query.value).then((res: any) => {
    list.value = res.list
    total.value = res.total * 1
  }).finally(() => {
    loading.value = false
  })
}
const handleSizeChange = (val: number) => {
  query.value.pageSize = val
  getList()
}

const handleCurrentChange = (val: number) => {
  query.value.pageNum = val
  getList()
}
onMounted(() => {
  getList()
})
</script>

<template>
  <div class="page-container">
    <div class="header">
      <img class="image" src="../../assets/images/home_image.png"/>
      <div class="text">
        <div class="title">{{ userStore.userInfo.name }} 欢迎使用重百票税平台</div>
        <div class="desc">很荣幸为您服务，祝您工作顺利！</div>
      </div>
      <div class="more">
        <div class="title">公告信息</div>
        <div class="divider"></div>
        <div class="link" @click="showMore">更多
          <FsSvgIcon class="icon" name="invoice-arrow_right_double"/>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="wrap"  v-loading="loading">
        <div class="list">
          <ListItem v-for="item in list" :key="item.id" :item="item" @click="onShowDetail"/>
        </div>
        <div class="page">
          <el-pagination
              class="page-pagination"
              v-model:current-page="query.pageNum"
              v-model:page-size="query.pageSize"
              :page-sizes="[10, 20, 30, 40]"
              :total="total"
              :small="true"
              background
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <DetailDrawer ref="drawerRef"></DetailDrawer>
  </div>
</template>

<style lang="scss" scoped>
.page-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #FFFFFF;

  .header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 244px;
    padding: 46px 0 22px 60px;
    background: linear-gradient(180deg, #EAF1FF 0%, #FAFCFE 47%, #FFFFFF 100%);
    border-bottom: 1px solid rgba(232, 232, 233, 1);

    .image {
      position: absolute;
      display: block;
      top: 10px;
      right: 112px;
      width: 328px;
      height: 208px;
    }

    .text {
      .title {
        margin-bottom: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 30px;
        color: #2C62E6;
        line-height: 42px;
        text-align: left;
        font-style: normal;
      }

      .desc {
        font-family: AlibabaPuHuiTi_3_55_Regular;
        font-size: 12px;
        color: #888FA2;
        line-height: 20px;
        text-align: left;
        font-style: normal;
      }
    }

    .more {
      display: flex;
      align-items: center;

      .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #1B1E28;
        line-height: 22px;
        text-align: left;
        font-style: normal;
      }

      .divider {
        width: 1px;
        height: 16px;
        margin: 0 11px;
        border: 1px solid #E8E8E9;
      }

      .link {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #165DFF;
        line-height: 22px;
        text-align: left;
        font-style: normal;
        cursor: pointer;
      }
    }
  }

  .content {
    flex: 1;
    box-sizing: border-box;
    padding-left: 62px;
    overflow: hidden;

    .wrap {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;

      .list {
        flex: 1;
        overflow: scroll;
      }

      .page {
        display: flex;
        justify-content: flex-end;
        box-sizing: border-box;
        padding: 22px 60px 22px 0;
      }
    }
  }
}

::-webkit-scrollbar {
  display: none
}

::-webkit-scrollbar-corner {
  background-color: #FFFFFF;
}
</style>
